<template>
    
</template>

<script>
import Utils from '../utils/Utils';
import UserNameLoginForm from './UserNameLoginForm.vue';
import MobilePhoneLoginForm from './MobilePhoneLoginForm.vue';

export default {
    data(){
        return {
            loginMode: 'account',
            isMobile: false,
            sites: {
                wiki: '异世界百科',
                book: '幻想世界轻小说',
                bbs: '异世界红茶馆'
            },
            siteTitle: '',
            otherSites: '',
            currentSite: 'wiki',
            rememberMe: {
                checked: false,
            },
            submit: {
                disabled: false,
                message: '',
            },
        }
    },
    methods: {
        getForm(){
            return {
                submit: this.$data.submit,
                userNameLoginForm: this.$refs.userNameLoginForm,
                mobilePhoneLoginForm: this.$refs.mobilePhoneLoginForm,
                remember: this.$data.rememberMe,
                update: this.updateForm.bind(this),
                getData: this.getFormData.bind(this),
            }
        },
        updateForm(){
            this.$form = this.getForm();
        },
        getFormData(){
            let data = {};
            for(let name in this.$form){
                let dom = this.$form[name];
                if(dom && 'getValue' in dom){
                    let one = dom.getValue();
                    if(one){
                        if(typeof one === 'object' && !Array.isArray(one)){
                            Utils.mergeObject(data, one);
                        } else {
                            data[name] = one;
                        }
                    }
                }
            }
            return data;
        },
        setLoginMode(mode){
            this.loginMode = mode;
            this.updateForm();
            this.$form.submit.disabled = false;
            this.$form.submit.message = '';
        },
        updateTitle(){
            let currentSite = this.currentSite;
            if(currentSite in this.sites){
                this.siteTitle = this.sites[currentSite];
                let otherSiteList = [];
                for(let key in this.sites){
                    if(currentSite != key){
                        otherSiteList.push(this.sites[key]);
                    }
                }
                this.otherSites = otherSiteList.join('、');
            } else {
                this.currentSite = 'wiki';
            }
        },
        initQuery(){
            let query = Utils.getQuery();
            if('site' in query){
                this.currentSite = query.site;
            }
        },
    },
    watch: {
        currentSite(currentSite, old){
            if(currentSite != old){
                this.updateTitle();
            }
        },
    },
    components: {
        UserNameLoginForm,
        MobilePhoneLoginForm,
    },
    created(){
        if(Utils.checkIsMobile()){
            this.loginMode = 'mobile';
            this.isMobile = true;
        }
        this.initQuery();
        this.updateForm();
        this.updateTitle();
    },
    beforeUpdate(){
        this.updateForm();
    },
}
</script>